<script>
import QuickLayout from '@/components/EmpsLayout/index.vue'
import DictEdition from '@/views/system/dict/dict-edition.vue'
import DictData from '@/views/system/dict/dict-data.vue'

export default {
  name: 'SystemDict',
  components: { DictData, DictEdition, QuickLayout },
  data() {
    return {
      dataListUrl: '/sys/dict/type/page',
      deleteUrl: '/sys/dict/type'
    }
  },
  methods: {
    handleEdit(id) {
      this.$refs.refEdit.init(id)
    },
    handleDict({ id }) {
      this.$refs.refDictData.init(id)
    }
  }
}
</script>

<template>
  <quick-layout
    :is-operate-btn="true"
    :is-operate="true"
    :data-list-url="dataListUrl"
    :delete-url="deleteUrl"
    size="small"
    @edit="handleEdit"
    @created="handleEdit(null)"
  >
    <!--  查询  -->
    <template v-slot:query="{query}">
      <el-form-item label="字段名称">
        <el-input v-model="query.name" placeholder="请输入字段名称" />
      </el-form-item>
    </template>
    <template>
      <el-table-column type="selection" header-align="center" align="center" width="50" />
      <el-table-column prop="dictType" label="字典类型" header-align="center" align="center" />
      <el-table-column prop="dictName" label="字典名称" header-align="center" align="center" />
      <el-table-column prop="remark" label="备注" header-align="center" align="center" />
    </template>

    <template v-slot:operateBtn="{row}">
      <el-button size="mini" type="text" @click="handleDict(row)">字典</el-button>
    </template>

    <!--   组件 -->
    <template #component>
      <dict-edition ref="refEdit" />
      <dict-data ref="refDictData" />
    </template>
  </quick-layout>
</template>

<style scoped lang="scss">

</style>

